import React, { Component } from 'react'
import {
    HashRouter as Router,
    Route,
    NavLink,
    Switch,
    Redirect
} from 'react-router-dom'
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import News2 from '../pages/News2'
import Msg from '../pages/Msg'
import NotFound from '../pages/NotFound'
import '../assets/css/layout.css'

export default class layout extends Component {
    render() {
        return (
            <div className='name'>
                <h1>Layout</h1>
                <br />
                <Router>
                    <NavLink to='/home'>
                        HOME
                    </NavLink>
                    <br />
                    <NavLink to='/about'>
                        ABOUT
                    </NavLink>
                    <br />
                    <NavLink to='/news'>
                        NEWS
                    </NavLink>
                    <br />
                    <NavLink to='/msg'>
                        MESSAGE
                    </NavLink>
                    <br />
                    <NavLink to='/news2'>
                        NEWS2
                    </NavLink>
                    {/* 一 */}
                    {/*     <Route path='/'>
                            <Redirect to='home'/>
                        </Route> */}
                    {/* 二 */}
                    {/*     <Redirect path='/' to='/home' /> */}

                    {/* switch严格匹配 */}
                    <Switch>
                        <Redirect path='/' to='/home' exact />
                        <Route path='/home' component={Home} />
                        {/* <Route>定义路由并且占位 */}
                        <Route path='/about'>
                            <About />
                        </Route>
                        <Route path='/news/:title' component={News} />
                        <Route path='/msg' component={Msg} />

                        <Route path='/news2/:title' component={News2} />


                        <Route path='*' component={NotFound} />
                    </Switch>
                </Router>
            </div>
        )
    }
}
